<template>
    <div class="wrap-container sn-container">
        <div class="sn-content">
            <div class="sn-title">
                <div>
                    债券分类配置(亿元)
                </div>
                <div style="cursor: pointer;">
                    详情
                </div>
            </div>
            <div class="sn-body">
                <div class="wrap-container">
                    <div class="chartsdom" id="bondClassConfiguration"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "bondClassConfiguration",
        data(){
            return{
                option: {
                    // color:[
                    //     '#00FFFF', '#00FF00', '#FFFF00', '#FF8C00', '#FF0000', '#FE8463',
                    // ],
                    title: {
                        text: '',
                        left: 'center',
                        top: 20,
                        textStyle: {
                            color: '#ccc'
                        }
                    },

                    tooltip: {
                        trigger: 'item',
                        formatter: '{b} : {c} ({d}%)'
                    },

                    // visualMap: {
                    //     show: false,
                    //     min: 10,
                    //     max: 600,
                    //     inRange: {
                    //         colorLightness: [0, 1]
                    //     }
                    // },
                    series: [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius: '70%',
                            center: ['50%', '50%'],
                            data: [
                                {value: 239.45, name: '国债',itemStyle: { color: '#047df8' }},
                                {value: 191.56, name: '地方政府债',itemStyle: { color: '#2990f9' }},
                                {value: 155.64, name: '金融债',itemStyle: { color: '#4fa4fa' }},
                                {value: 119.73, name: '政府支持机构债',itemStyle: { color: '#75b8fb' }},
                                {value: 107.75, name: '政策银行债',itemStyle: { color: '#9bcbfc' }},
                                {value: 71.83, name: '中期票据',itemStyle: { color: '#c0defd' }},
                                {value: 71.83, name: '资产支持证券',itemStyle: { color: '#14ffdd' }},
                                {value: 59.86, name: '央行票据',itemStyle: { color: '#baff48' }},
                                {value: 47.89, name: '公司债',itemStyle: { color: '#83f92a' }},
                                {value: 47.89, name: '短期融资券',itemStyle: { color: '#ffc353' }},
                                // {value: 0, name: '可交换债'},
                                // {value: 0, name: '可转债'},
                                // {value: 0, name: '超短期融资券'},
                                // {value: 0, name: '集合票据'},
                                // {value: 0, name: '可分离转债存债'},
                                // {value: 0, name: '永续债'},
                                // {value: 0, name: '私募债'},
                                // {value: 0, name: '定向工具'},
                                // {value: 0, name: '国际机构债'},
                            ].sort(function (a, b) { return a.value - b.value; }),
                            roseType: 'radius',
                            label: {
                                color: '#ffffff'
                            },
                            labelLine: {
                                lineStyle: {
                                    color: '#175bff'
                                },
                                smooth: 0.2,
                                length: 10,
                                length2: 20
                            },
                            // itemStyle: {
                            //     // color: '#c23531',
                            //     shadowBlur: 200,
                            //     shadowColor: 'rgba(0, 0, 0, 0.5)',
                            // },

                            animationType: 'scale',
                            animationEasing: 'elasticOut',
                            animationDelay: function (idx) {
                                return Math.random() * 200;
                            }
                        }
                    ]
                }
            }
        },
        mounted() {
            this.getEchart()
        },
        methods:{
            getEchart() {
                let myChart = echarts.init(document.getElementById('bondClassConfiguration'));
                myChart.setOption(this.option, true);
                window.addEventListener('resize', () => {
                    myChart.resize();
                });
            }
        }
    }
</script>

<style lang="scss" scoped>
    .sn-container {
        left: 50px;
        top: 2460px;
        width: 600px;
        height: 550px;
        .chartsdom {
            width: 100%;
            height: 100%;
        }
    }
    /deep/.sn-title{
        display: flex;
        div:nth-child(2){
            margin-left: auto;
            display: flex;
            .el-select{
                width: 80px;
            }
            .el-date-editor{
                width: 120px;
            }
            .el-input__inner{
                height: 20px !important;
            }
        }
    }
</style>